<script setup>
import { using } from '../common.js';
import { UserOpGte } from '../op-perms.js';
</script>

<template>
  <aside class="tool-bar">
    <template v-if="UserOpGte('审核')">
      <a-button title="批注" :disabled="'comment' == using" @click="() => using = 'comment'">
        <svg t="1686881938397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5622" width="26" height="26"><path d="M670.6 65.1l154.2 154.2-549.9 549.9H120.7V626c0-4.3-0.1-7.9 0-11L670.6 65.1m0-65.1C654.8 0 639 6 627 18.1L74.8 570.2c-18.9 18.9-18.1 19.6-18.1 60.1 0 202.2 0.1 202.8 0.1 202.8s0.6 0.1 183.3 0.1h27.6c32.7 0 34.6-0.6 52.1-18.2l552-552c24.1-24.1 24.1-63.2 0-87.3L714.2 18.1C702.2 6 686.4 0 670.6 0z" p-id="5623"></path><path d="M534.996 200.712l45.325-45.325 154.148 154.148-45.325 45.325zM935.3 826.8H670.2c-17.7 0-32.1-14.4-32.1-32.1s14.4-32.1 32.1-32.1h265.1c17.7 0 32.1 14.4 32.1 32.1s-14.4 32.1-32.1 32.1zM935.3 1024H88.7c-17.7 0-32.1-14.4-32.1-32.1s14.4-32.1 32.1-32.1h846.6c17.7 0 32.1 14.4 32.1 32.1S953 1024 935.3 1024z" p-id="5624"></path></svg>
      </a-button>
    </template>
  </aside>
</template>

<style>
.base-label .tool-bar { background: #fff; }

.base-label .tool-bar,
.base-label .tool-bar .ant-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.base-label .tool-bar {
  gap: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.base-label .tool-bar .ant-btn {
  height: auto;
  border: 0;
  background: transparent;
}

.base-label .tool-bar .ant-btn svg { fill: currentColor; }
</style>
